<template>
	<div class="addEdit-block" :style='{ "padding": "30px 5%" }' style="width: 100%;">
		<el-form :style='{ "borderRadius": "6px", "padding": "30px" }' class="add-update-preview" ref="ruleForm"
			:model="ruleForm" :rules="rules" label-width="140px">
			<template>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' class="input"
					v-if="type != 'info'" label="房屋号" prop="fangwuhao">
					<el-input v-model="ruleForm.fangwuhao" placeholder="房屋号" clearable
						:readonly="ro.fangwuhao"></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' v-else
					class="input" label="房屋号" prop="fangwuhao">
					<el-input v-model="ruleForm.fangwuhao" placeholder="房屋号" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' class="input"
					v-if="type != 'info'" label="房屋名称" prop="fangwumingcheng">
					<el-input v-model="ruleForm.fangwumingcheng" placeholder="房屋名称" clearable
						:readonly="ro.fangwumingcheng"></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' v-else
					class="input" label="房屋名称" prop="fangwumingcheng">
					<el-input v-model="ruleForm.fangwumingcheng" placeholder="房屋名称" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' class="select"
					v-if="type != 'info'" label="房屋类型" prop="fangwuleixing">
					<el-select :disabled="ro.fangwuleixing" v-model="ruleForm.fangwuleixing" placeholder="请选择房屋类型">
						<el-option v-for="(item, index) in fangwuleixingOptions" v-bind:key="index" :label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' v-else
					class="input" label="房屋类型" prop="fangwuleixing">
					<el-input v-model="ruleForm.fangwuleixing" placeholder="房屋类型" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' class="upload"
					v-if="type != 'info' && !ro.fangwutupian" label="房屋图片" prop="fangwutupian">
					<file-upload tip="点击上传房屋图片" action="file/upload" :limit="3" :multiple="true"
						:fileUrls="ruleForm.fangwutupian ? ruleForm.fangwutupian : ''"
						@change="fangwutupianUploadChange"></file-upload>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' class="upload"
					v-else-if="ruleForm.fangwutupian" label="房屋图片" prop="fangwutupian">
					<img v-if="ruleForm.fangwutupian.substring(0, 4) == 'http'" class="upload-img"
						style="margin-right:20px;" v-bind:key="index" :src="ruleForm.fangwutupian.split(',')[0]"
						width="100" height="100">
					<img v-else class="upload-img" style="margin-right:20px;" v-bind:key="index"
						v-for="(item, index) in ruleForm.fangwutupian.split(',')" :src="$base.url + item" width="100"
						height="100">
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' class="input"
					v-if="type != 'info'" label="朝向楼层" prop="chaoxianglouceng">
					<el-input v-model="ruleForm.chaoxianglouceng" placeholder="朝向楼层" clearable
						:readonly="ro.chaoxianglouceng"></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' v-else
					class="input" label="朝向楼层" prop="chaoxianglouceng">
					<el-input v-model="ruleForm.chaoxianglouceng" placeholder="朝向楼层" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' class="input"
					v-if="type != 'info'" label="房屋面积" prop="fangwumianji">
					<el-input v-model="ruleForm.fangwumianji" placeholder="房屋面积" clearable
						:readonly="ro.fangwumianji"></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' v-else
					class="input" label="房屋面积" prop="fangwumianji">
					<el-input v-model="ruleForm.fangwumianji" placeholder="房屋面积" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' class="input"
					v-if="type != 'info'" label="房屋地址" prop="fangwudizhi">
					<el-input v-model="ruleForm.fangwudizhi" placeholder="房屋地址" clearable
						:readonly="ro.fangwudizhi"></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' v-else
					class="input" label="房屋地址" prop="fangwudizhi">
					<el-input v-model="ruleForm.fangwudizhi" placeholder="房屋地址" readonly></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' class="input"
					v-if="type != 'info'" label="房屋价格" prop="fangwujiage">
					<el-input v-model="ruleForm.fangwujiage" placeholder="房屋价格" clearable
						:readonly="ro.fangwujiage"></el-input>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' v-else
					class="input" label="房屋价格" prop="fangwujiage">
					<el-input v-model="ruleForm.fangwujiage" placeholder="房屋价格" readonly></el-input>
				</el-form-item>


				<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' class="select" v-if="type!='info'"  label="住房状态" prop="zhufangzhuangtai">
					<el-select :disabled="ro.zhufangzhuangtai" v-model="ruleForm.zhufangzhuangtai" placeholder="请选择住房状态" >
						<el-option
							v-for="(item,index) in zhufangzhuangtaiOptions"
							v-bind:key="index"
							:label="item"
							:value="item">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item :style='{"width":"45%","margin":"0 2% 20px 0","display":"inline-block"}' v-else class="input" label="住房状态" prop="zhufangzhuangtai">
					<el-input v-model="ruleForm.zhufangzhuangtai"
						placeholder="住房状态" readonly></el-input>
				</el-form-item>



				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' class="date"
					v-if="type != 'info'" label="发布日期" prop="faburiqi">
					<el-date-picker format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="ruleForm.faburiqi"
						type="date" :readonly="ro.faburiqi" placeholder="发布日期"></el-date-picker>
				</el-form-item>
				<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' class="input"
					v-else-if="ruleForm.faburiqi" label="发布日期" prop="faburiqi">
					<el-input v-model="ruleForm.faburiqi" placeholder="发布日期" readonly></el-input>
				</el-form-item>
			</template>
			<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }' v-if="type != 'info'"
				label="房屋详情" prop="fangwuxiangqing">
				<editor style="min-width: 200px; max-width: 600px;" v-model="ruleForm.fangwuxiangqing" class="editor"
					action="file/upload">
				</editor>
			</el-form-item>
			<el-form-item :style='{ "width": "45%", "margin": "0 2% 20px 0", "display": "inline-block" }'
				v-else-if="ruleForm.fangwuxiangqing" label="房屋详情" prop="fangwuxiangqing">
				<span
					:style='{ "fontSize": "14px", "lineHeight": "40px", "color": "#333", "fontWeight": "500", "display": "inline-block" }'
					v-html="ruleForm.fangwuxiangqing"></span>
			</el-form-item>
			<el-form-item :style='{ "padding": "0", "margin": "0" }' class="btn">
				<el-button
					:style='{ "border": "0", "cursor": "pointer", "padding": "0", "margin": "0 20px 0 0", "outline": "none", "color": "rgba(255, 255, 255, 1)", "borderRadius": "4px", "background": "rgba(222, 216, 156, 1)", "width": "128px", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
					v-if="type != 'info'" type="primary" class="btn-success" @click="onSubmit">提交</el-button>
				<el-button
					:style='{ "border": "1px solid rgba(222, 216, 156, 1)", "cursor": "pointer", "padding": "0", "margin": "0", "outline": "none", "color": "rgba(222, 216, 156, 1)", "borderRadius": "4px", "background": "rgba(255, 255, 255, 1)", "width": "128px", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
					v-if="type != 'info'" class="btn-close" @click="back()">取消</el-button>
				<el-button
					:style='{ "border": "1px solid rgba(222, 216, 156, 1)", "cursor": "pointer", "padding": "0", "margin": "0", "outline": "none", "color": "rgba(222, 216, 156, 1)", "borderRadius": "4px", "background": "rgba(255, 255, 255, 1)", "width": "128px", "lineHeight": "40px", "fontSize": "14px", "height": "40px" }'
					v-if="type == 'info'" class="btn-close" @click="back()">返回</el-button>
			</el-form-item>
		</el-form>


	</div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber, isIntNumer, isEmail, isPhone, isMobile, isURL, checkIdCard } from "@/utils/validate";
export default {
	data() {
		let self = this
		var validateIdCard = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!checkIdCard(value)) {
				callback(new Error("请输入正确的身份证号码"));
			} else {
				callback();
			}
		};
		var validateUrl = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isURL(value)) {
				callback(new Error("请输入正确的URL地址"));
			} else {
				callback();
			}
		};
		var validateMobile = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isMobile(value)) {
				callback(new Error("请输入正确的手机号码"));
			} else {
				callback();
			}
		};
		var validatePhone = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isPhone(value)) {
				callback(new Error("请输入正确的电话号码"));
			} else {
				callback();
			}
		};
		var validateEmail = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isEmail(value)) {
				callback(new Error("请输入正确的邮箱地址"));
			} else {
				callback();
			}
		};
		var validateNumber = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isNumber(value)) {
				callback(new Error("请输入数字"));
			} else {
				callback();
			}
		};
		var validateIntNumber = (rule, value, callback) => {
			if (!value) {
				callback();
			} else if (!isIntNumer(value)) {
				callback(new Error("请输入整数"));
			} else {
				callback();
			}
		};
		return {
			id: '',
			type: '',


			ro: {
				fangwuhao: false,
				fangwumingcheng: false,
				fangwuleixing: false,
				fangwutupian: false,
				chaoxianglouceng: false,
				fangwumianji: false,
				fangwudizhi: false,
				fangwujiage: false,
				zhufangzhuangtai:false,
				fangwuxiangqing: false,
				faburiqi: false,
			},


			ruleForm: {
				fangwuhao: '',
				fangwumingcheng: '',
				fangwuleixing: '',
				fangwutupian: '',
				chaoxianglouceng: '',
				fangwumianji: '',
				fangwudizhi: '',
				fangwujiage: '',
				zhufangzhuangtai:'',
				fangwuxiangqing: '',
				faburiqi: '',
			},

			fangwuleixingOptions: [],

			zhufangzhuangtaiOptions: [],

			rules: {
				fangwuhao: [
				],
				fangwumingcheng: [
				],
				fangwuleixing: [
				],
				fangwutupian: [
				],
				chaoxianglouceng: [
				],
				fangwumianji: [
				],
				fangwudizhi: [
				],
				fangwujiage: [
					{ validator: validateIntNumber, trigger: 'blur' },
				],
				zhufangzhuangtai:[],
				fangwuxiangqing: [
				],
				faburiqi: [
				],
			}
		};
	},
	props: ["parent"],
	computed: {



	},
	created() {
		this.ruleForm.faburiqi = this.getCurDate()
	},
	methods: {

		// 下载
		download(file) {
			window.open(`${file}`)
		},
		// 初始化
		init(id, type) {
			if (id) {
				this.id = id;
				this.type = type;
			}
			if (this.type == 'info' || this.type == 'else') {
				this.info(id);
			} else if (this.type == 'logistics') {
				this.logistics = false;
				this.info(id);
			} else if (this.type == 'cross') {
				var obj = this.$storage.getObj('crossObj');
				for (var o in obj) {
					if (o == 'fangwuhao') {
						this.ruleForm.fangwuhao = obj[o];
						this.ro.fangwuhao = true;
						continue;
					}
					if (o == 'fangwumingcheng') {
						this.ruleForm.fangwumingcheng = obj[o];
						this.ro.fangwumingcheng = true;
						continue;
					}
					if (o == 'fangwuleixing') {
						this.ruleForm.fangwuleixing = obj[o];
						this.ro.fangwuleixing = true;
						continue;
					}
					if (o == 'fangwutupian') {
						this.ruleForm.fangwutupian = obj[o];
						this.ro.fangwutupian = true;
						continue;
					}
					if (o == 'chaoxianglouceng') {
						this.ruleForm.chaoxianglouceng = obj[o];
						this.ro.chaoxianglouceng = true;
						continue;
					}
					if (o == 'fangwumianji') {
						this.ruleForm.fangwumianji = obj[o];
						this.ro.fangwumianji = true;
						continue;
					}
					if (o == 'fangwudizhi') {
						this.ruleForm.fangwudizhi = obj[o];
						this.ro.fangwudizhi = true;
						continue;
					}
					if (o == 'fangwujiage') {
						this.ruleForm.fangwujiage = obj[o];
						this.ro.fangwujiage = true;
						continue;
					}
					if (o == 'zhufangzhuangtai') {
						this.ruleForm.zhufangzhuangtai = obj[o];
						this.ro.zhufangzhuangtai = true;
						continue;
					}
					if (o == 'fangwuxiangqing') {
						this.ruleForm.fangwuxiangqing = obj[o];
						this.ro.fangwuxiangqing = true;
						continue;
					}
					if (o == 'faburiqi') {
						this.ruleForm.faburiqi = obj[o];
						this.ro.faburiqi = true;
						continue;
					}
				}
			}

			this.zhufangzhuangtaiOptions = "出租,出售,空置".split(',')


			// 获取用户信息
			this.$http({
				url: `${this.$storage.get('sessionTable')}/session`,
				method: "get"
			}).then(({ data }) => {
				if (data && data.code === 0) {

					var json = data.data;
				} else {
					this.$message.error(data.msg);
				}
			});

			this.$http({
				url: `option/fangwuleixing/fangwuleixing`,
				method: "get"
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.fangwuleixingOptions = data.data;
				} else {
					this.$message.error(data.msg);
				}
			});

		},
		// 多级联动参数

		info(id) {
			this.$http({
				url: `fangwuxinxi/info/${id}`,
				method: "get"
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.ruleForm = data.data;
					//解决前台上传图片后台不显示的问题
					let reg = new RegExp('../../../upload', 'g')//g代表全部
					this.ruleForm.fangwuxiangqing = this.ruleForm.fangwuxiangqing.replace(reg, '../../../community/upload');
				} else {
					this.$message.error(data.msg);
				}
			});
		},


		// 提交
		onSubmit() {








			if (this.ruleForm.fangwutupian != null) {
				this.ruleForm.fangwutupian = this.ruleForm.fangwutupian.replace(new RegExp(this.$base.url, "g"), "");
			}













			var objcross = this.$storage.getObj('crossObj');

			//更新跨表属性
			var crossuserid;
			var crossrefid;
			var crossoptnum;
			if (this.type == 'cross') {
				var statusColumnName = this.$storage.get('statusColumnName');
				var statusColumnValue = this.$storage.get('statusColumnValue');
				if (statusColumnName != '') {
					var obj = this.$storage.getObj('crossObj');
					if (statusColumnName && !statusColumnName.startsWith("[")) {
						for (var o in obj) {
							if (o == statusColumnName) {
								obj[o] = statusColumnValue;
							}
						}
						var table = this.$storage.get('crossTable');
						this.$http({
							url: `${table}/update`,
							method: "post",
							data: obj
						}).then(({ data }) => { });
					} else {
						crossuserid = this.$storage.get('userid');
						crossrefid = obj['id'];
						crossoptnum = this.$storage.get('statusColumnName');
						crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
					}
				}
			}
			this.$refs["ruleForm"].validate(valid => {
				if (valid) {
					if (crossrefid && crossuserid) {
						this.ruleForm.crossuserid = crossuserid;
						this.ruleForm.crossrefid = crossrefid;
						let params = {
							page: 1,
							limit: 10,
							crossuserid: this.ruleForm.crossuserid,
							crossrefid: this.ruleForm.crossrefid,
						}
						this.$http({
							url: "fangwuxinxi/page",
							method: "get",
							params: params
						}).then(({
							data
						}) => {
							if (data && data.code === 0) {
								if (data.data.total >= crossoptnum) {
									this.$message.error(this.$storage.get('tips'));
									return false;
								} else {
									this.$http({
										url: `fangwuxinxi/${!this.ruleForm.id ? "save" : "update"}`,
										method: "post",
										data: this.ruleForm
									}).then(({ data }) => {
										if (data && data.code === 0) {
											this.$message({
												message: "操作成功",
												type: "success",
												duration: 1500,
												onClose: () => {
													this.parent.showFlag = true;
													this.parent.addOrUpdateFlag = false;
													this.parent.fangwuxinxiCrossAddOrUpdateFlag = false;
													this.parent.search();
													this.parent.contentStyleChange();
												}
											});
										} else {
											this.$message.error(data.msg);
										}
									});

								}
							} else {
							}
						});
					} else {
						this.$http({
							url: `fangwuxinxi/${!this.ruleForm.id ? "save" : "update"}`,
							method: "post",
							data: this.ruleForm
						}).then(({ data }) => {
							if (data && data.code === 0) {
								this.$message({
									message: "操作成功",
									type: "success",
									duration: 1500,
									onClose: () => {
										this.parent.showFlag = true;
										this.parent.addOrUpdateFlag = false;
										this.parent.fangwuxinxiCrossAddOrUpdateFlag = false;
										this.parent.search();
										this.parent.contentStyleChange();
									}
								});
							} else {
								this.$message.error(data.msg);
							}
						});
					}
				}
			});
		},
		// 获取uuid
		getUUID() {
			return new Date().getTime();
		},
		// 返回
		back() {
			this.parent.showFlag = true;
			this.parent.addOrUpdateFlag = false;
			this.parent.fangwuxinxiCrossAddOrUpdateFlag = false;
			this.parent.contentStyleChange();
		},
		fangwutupianUploadChange(fileUrls) {
			this.ruleForm.fangwutupian = fileUrls;
		},
	}
};
</script>
<style lang="scss" scoped>
.amap-wrapper {
	width: 100%;
	height: 500px;
}

.search-box {
	position: absolute;
}

.el-date-editor.el-input {
	width: auto;
}

.add-update-preview .el-form-item /deep/ .el-form-item__label {
	padding: 0 10px 0 0;
	color: #666;
	font-weight: 500;
	width: 140px;
	font-size: 14px;
	line-height: 40px;
	text-align: right;
}

.add-update-preview .el-form-item /deep/ .el-form-item__content {
	margin-left: 140px;
}

.add-update-preview .el-input /deep/ .el-input__inner {
	border: 2px solid rgba(213, 210, 195, 1);
	border-radius: 4px;
	padding: 0 12px;
	outline: none;
	color: #000;
	width: 280px;
	font-size: 14px;
	height: 40px;
}

.add-update-preview .el-select /deep/ .el-input__inner {
	border: 2px solid rgba(213, 210, 195, 1);
	border-radius: 4px;
	padding: 0 10px;
	outline: none;
	color: #000;
	width: 200px;
	font-size: 14px;
	height: 40px;
}

.add-update-preview .el-date-editor /deep/ .el-input__inner {
	border: 2px solid rgba(213, 210, 195, 1);
	border-radius: 4px;
	padding: 0 10px 0 30px;
	outline: none;
	color: #000;
	width: 200px;
	font-size: 14px;
	height: 40px;
}

.add-update-preview /deep/ .el-upload--picture-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	width: auto;
	height: auto;
	line-height: initial;
	vertical-align: middle;
}

.add-update-preview /deep/ .upload .upload-img {
	border: 2px dashed rgba(213, 210, 195, 1);
	cursor: pointer;
	border-radius: 6px;
	color: #999;
	width: 150px;
	font-size: 32px;
	line-height: 150px;
	text-align: center;
	height: 150px;
}

.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
	border: 2px dashed rgba(213, 210, 195, 1);
	cursor: pointer;
	border-radius: 6px;
	color: #999;
	width: 150px;
	font-size: 32px;
	line-height: 150px;
	text-align: center;
	height: 150px;
}

.add-update-preview /deep/ .el-upload .el-icon-plus {
	border: 2px dashed rgba(213, 210, 195, 1);
	cursor: pointer;
	border-radius: 6px;
	color: #999;
	width: 150px;
	font-size: 32px;
	line-height: 150px;
	text-align: center;
	height: 150px;
}

.add-update-preview .el-textarea /deep/ .el-textarea__inner {
	border: 2px solid rgba(213, 210, 195, 1);
	border-radius: 4px;
	padding: 12px;
	outline: none;
	color: #000;
	width: 300px;
	font-size: 14px;
	height: 120px;
}
</style>
